<template>
  <div>
    <div><el-button type="warning" @click="dialogVisible = true">+ 添加</el-button></div>
    <div></div>
    <!--  -->
    <div align=left>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
            角色名:
            <el-input v-model="name" placeholder="角色名"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add"
            >保 存</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!--  -->
    <div></div>
    <!--  -->
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        dialogVisible: false,
        name: '',
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {},

  methods: {
    // 添加角色
    add(){
        this.axios.post('/admin/rbacm/add/role', {'name': this.name})
        .then(res =>{
            console.log('添加角色的响应:', res)
            if (res.data.code == 200){
                this.$message({
                    type: 'success',
                    message: res.data.message
                })
                this.name = ''
                this.dialogVisible = false
            } else {
                this.$message({
                    type: 'success',
                    message: '添加失败'
                })
            }
        }).catch(err =>{
            console.log('>>>', err)
        })
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped >
* {
  margin: 0;
}
</style>
